<template>
  <div>
    <Card :bordered="false">
      <tables
        ref="tables"
        editable
        searchable
        v-model="tableData"
        :columns="columns"
        @on-edit="onEdit"
        @on-copy="onCopy"
        :addable="addable"
        remoteSearch
        @handleRemoteSearch="handleRemoteSearch"
        @handleAdd="onAddProject"
        @on-delete="onDelete"
        @on-detection="onDetection"
        :ckPermission="['project.add']"
      />
    </Card>
    <Page
      style="margin-top: 12px"
      :total="total"
      :current="page"
      size="small"
      :page-size="pageSize"
      @on-change="handleChange"
      show-total
    />

    <DeleteModal
      :modalVisible="modalVisible"
      :modalLoading="modalLoading"
      :deleteId="deleteId"
      @handleDelete="handleDelete"
      @handleChangeVisible="handleChangeVisible"
    />

    <Detection
      :detectionShow="detectionShow"
      :Steps="Steps"
      @handleChangeVisible="detectionVisible"
    />
  </div>
</template>

<script>
import Tables from '_c/tables'
import DeleteModal from '_c/delete-modal'
import Detection from '@/view/project/component/detection'
import {
  project,
  deleteProject,
  copyProject,
  detectionProject
} from '@/api/project'
import render from './render'
import { setCookie, getCookie } from '@/libs/cookie'

export default {
  name: 'list',
  components: {
    Tables,
    DeleteModal,
    Detection
  },
  mounted () {
    this.page = Number(getCookie('project_page')) || 1
    this.handleGetProjectList({ page: this.page, pageSize: this.pageSize })
  },
  data () {
    return {
      modalVisible: false,
      modalLoading: false,
      deleteId: 0,
      showModal: false,
      detectionShow: false,
      projectId: 0,
      addable: true,
      handleType: '编辑部门',
      Steps: [],
      usersData: [],
      formData: {},
      total: 0,
      page: 1,
      pageSize: 10,
      columns: [
        { title: '项目名称', key: 'name' },
        { title: '环境', key: 'env_name', hiddenSearch: true },
        { title: '上线方式', key: 'repo_mode', hiddenSearch: true },
        { title: '部门', key: 'workspace_name', hiddenSearch: true },
        {
          title: '状态',
          hiddenSearch: true,
          key: 'status',
          render: (h, params) => {
            let _status = params.row.status === 1 ? '激活' : '禁用'
            return h('span', _status)
          }
        },
        {
          title: '操作',
          key: 'handle',
          width: '320px',
          button: render
        }
      ],
      tableData: []
    }
  },
  methods: {
    onEdit: function (row) {
      this.$router.push('/project/edit/' + row.id + '/' + row.name)
    },
    onCopy: function (id) {
      copyProject({ id }).then(res => {
        this.$Message.success(res.message)
        this.handleGetProjectList({ page: this.page, pageSize: this.pageSize })
      })
    },
    onDetection: function (val) {
      detectionProject({ id: val }).then(res => {
        this.Steps = res.data.map(m => {
          return {
            title: m.title,
            content: m.error,
            status: m.status === true ? 'finish' : 'error'
          }
        })
        this.detectionShow = true
      })
    },
    changeVisible: function (val) {
      this.showModal = val
    },
    detectionVisible: function (val) {
      this.detectionShow = val
    },
    onDelete: function (id) {
      this.modalVisible = true
      this.deleteId = id
    },
    handleChangeVisible: function (val) {
      this.modalVisible = val
    },
    onAddProject: function () {
      this.$router.push('/project/add/')
    },
    handleDelete: function (id) {
      this.modalLoading = true
      deleteProject({ id: id }).then(res => {
        this.$Message.success(res.message)
        this.handleGetProjectList({ page: this.page, pageSize: this.pageSize })
      })
      setTimeout(() => {
        this.modalLoading = false
        this.modalVisible = false
      }, 2000)
    },
    handleGetProjectList: function (param = {}) {
      project(param).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    handleChange: function (val) {
      setCookie('project_page', val)
      this.page = val
      this.handleGetProjectList({ page: val, pageSize: this.pageSize })
    },
    handleRemoteSearch: function (param) {
      this.page = param.page = 1
      param.pageSize = this.pageSize
      this.handleGetProjectList(param)
    }
  }
}
</script>

<style>
</style>
